<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .hide {
            display: none;
        }
        .add-modal,.edit-modal,.del-modal {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: -225px;
            width: 450px;
            height: 300px;
            background-color: white;
            z-index: 10;
        }
        .host_tag {
            padding: 3px;
        }
    </style>
</head>
<body>
    <h1>应用列表</h1>
    <div>
        <input id="add_app" type="button" value="添加">
    </div>
    <div class="shadow hide"></div>
    <table border="1">
        <thead>
            <tr>
                <td>应用名称</td>
                <td>应用主机列表</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            {% for row in app_list %}
                <tr aid="{{ row.id }}">
                    <td>{{ row.name }}</td>
                    <td>
                        {% for host in row.r.all %}
                            <span class="host_tag" hid="{{ host.nid }}">{{ host.hostname }}</span>
                        {% endfor %}
                    </td>
                    <td><a class="edit-m">编辑</a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="add-modal hide">
        <form id="add_h" action="/app/" method="post">
        <div>
            <input type="text" name="app_name" placeholder="应用名称">
        </div>
        <div>
            <select id="host_list" name="host_list" multiple>
                {% for row in host_list %}
                    <option value="{{ row.nid }}">{{ row.hostname }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <input type="submit" id="confirmModal" value="确认">
{#            <a href="#" id="test_ajax">ajax发送</a>#}
            <input type="button" id="ajax_confirm" value="ajax提交">
            <input type="button" class="cancelModal" value="取消">
            <span id="err_msg"></span>
        </div>
        </form>
    </div>
    <div class="edit-modal hide">
        <form id="edit_h">
        <div>
            <input type="hidden" name="aid">
            <input type="text" name="hostname" placeholder="应用名称">
        </div>
        <div>
            <select name="host_id" multiple>
                {% for row in host_list %}
                    <option value="{{ row.nid }}">{{ row.hostname }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
{#            <input type="submit" id="confirmModal" value="确认">#}
            <input type="button" id="test_ajax_edit" value="ajax编辑">
            <input type="button" class="cancelModal" value="取消">
            <span id="err_msg_edit" style="color: red;"></span>
        </div>
        </form>
    </div>
<script src="/static/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('#add_app').click(function () {
            $('.shadow,.add-modal').removeClass('hide');
        });
        $('.cancelModal').click(function () {
            $('.shadow,.add-modal,.edit-modal').addClass('hide');
        })
        $('#ajax_confirm').click(function () {
            $.ajax({
                url: '/ajax_add_app/',
                type: 'POST',
                data: $('#add_h').serialize(),
                dataType: 'JSON',
                traditional: true,
                success: function (obj) {
                    if(obj.status){
                        location.reload()
                    }else{
                        $('#err_msg').text(obj.err)
                    }
                },
                error: function (obj) {

                }
            });
        });

        $('.edit-m').click(function () {
            $('.shadow,.edit-modal').removeClass('hide');
            var hid_list = [];
            var aid = $(this).parent().parent().attr('aid');
            var app_name = $(this).parent().prevAll('td:eq(1)').text();
            $(this).parent().prev().children().each(function () {
                var hid = $(this).attr('hid');
                hid_list.push(hid)

            });
            var $div = $('#edit_h');
            $div.find('select').val(hid_list);
            $div.find('input[name="hostname"]').val(app_name);
            $div.find('input[name="aid"]').val(aid)


        });
        $('#test_ajax_edit').click(function () {
            $.ajax({
                url: '/app_edit/',
                type: 'POST',
                data: $('#edit_h').serialize(),
                {#dataType: 'JSON',#}
                {#traditional: true,#}
                success: function (obj) {
                    location.reload()
                }
            });
        })
    })
</script>
</body>
</html>